<!--
 * @Author: your name
 * @Date: 2021-12-25 18:54:28
 * @LastEditTime: 2022-01-02 02:30:41
 * @LastEditors: Please set LastEditors
 * @Description: 打list开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: \order-ui2\src\pages\news\engSup.vue
-->
<template>
  <div class="class0">
    <div class="header">
      <div
        style="
          font-size: 20px;
          color: #7232dd;
          margin-bottom: 10px;
          margin-left: 5px;
        "
      >
        <i class="el-icon-s-goods"></i>商品销量详情
      </div>
    </div>

    <!-- 表单 -->
    <!-- {{proCategory.list.name}} -->
    <div class="class1">
      <template>
        <!-- 表格 -->
        <el-table border :data="productData.list" style="width: 100%">
          <el-table-column prop="name" label="商品名称" width="200">
          </el-table-column>
          <el-table-column label="类别" width="200">
            <template slot-scope="scope">
              <div>{{ scope.row.category.name }}</div>
            </template>
          </el-table-column>
          <el-table-column prop="price" label="单价" width="200">
          </el-table-column>
          <el-table-column prop="unit" label="单位" width="200">
          </el-table-column>
          <el-table-column prop="sales" label="销量"> </el-table-column>
          <el-table-column prop="" label="销售额" width="200">
            <template slot-scope="scope">
              {{ scope.row.price * scope.row.sales }}
            </template>
          </el-table-column>
        </el-table>

        <div style="height: 20px"></div>
      </template>
    </div>
    <!-- 柱状图 -->
  </div>
</template>
    </div>
  </div>
</template>
    </div>
  </div>
</template>

<script>
import { mapActions, mapState } from "vuex";
export default {
  data() {
    return {
      value: "",
      page: 1,
      pageSize: 200,
      lingsNums: 0,
    };
  },
  // 生命周期函数
  created() {
    // this.getProductData();
    this.getProCategoryData();
  },
  methods: {
    ...mapActions("product", ["getProductDataVuex", "getProCategoryDataVuex"]),

    // 产品所有数据
    getProductData() {
      let param = {
        page: this.page,
        pageSize: this.pageSize,
      };
      // console.log(this.getProductDataVuex(param),"151555");
      this.getProductDataVuex(param).then((res) => {
        res.list.forEach((item) => {
          if (item.productCategoryId == 9450) {
            this.lingsNums += item.sales * item.price;
            // this.lings.push(item.sales);
          }
          // console.log(item,"1111111");

          // this.proSales.push(item.sales);
        });
      });
    },
    // 产品分类数据
    getProCategoryData() {
      let param = {
        page: 1,
        pageSize: 200,
      };
      this.getProCategoryDataVuex(param).then((res) => {
        console.log(res);
        res.list.forEach((item) => {});
      });
    },

    // 折线图 销售额变化
  },

  mounted() {
    this.getProductData();
  },
  computed: {
    ...mapState("product", ["productData", "proCategory"]),
  },
};
</script>

<style scoped>
.class0 {
  min-height: calc(100vh);
}
.class1 {
}
.class2 {
  float: left;
}
.class3 {
  clear: both;
}
.class4 {
  float: left;
}
</style>
